<template>
    <div>
        <div class="container">
            <el-page-header @back="goBack" content="后端厂商详情"></el-page-header>
            <el-form label-width="160px" class="e-m-t-45">
                <div class="flex">
                    <div class="e-flex-1">
                        <el-form-item label="编号:">
                            <span>{{form.ysid}}</span>
                        </el-form-item>
                    </div>
                    <div class="e-flex-1">
                        <el-form-item label="名称:">
                            <span>{{form.name}}</span>
                        </el-form-item>
                    </div>
                    <!-- <div class="e-flex-1">
                        <el-form-item label="联系电话:">
                            <span>{{form.mobile}}</span>
                        </el-form-item>
                    </div> -->
                </div>
                <div class="flex">
                    <div class="e-flex-1">
                        <el-form-item label="所属地区:">
                            <span>{{ form.citynames }}</span>
                        </el-form-item>
                    </div>
                    <div class="e-flex-1">
                        <el-form-item label="地址:">
                            <span>{{form.address}}</span>
                        </el-form-item>
                    </div>
                    <!-- <div class="e-flex-1">
                    </div> -->
                </div>
                <h4>后端厂商库存</h4>
                <el-table :data="form.stockdata" style="width: 100%">
                    <el-table-column
                        fixed
                        prop="name"
                        label="可回收物"
                        >
                    </el-table-column>
                    <el-table-column prop="weight" label="数量（KG/件）" width="180">
                        <template slot-scope="scope">
                            <span>{{ scope.row.weight }}{{ scope.row.isweighing?'KG':'件' }}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="操作" fixed="right" width="200">
                        <template slot-scope="scope">
                            <el-button type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
                <h4>后端厂商订单</h4>
                <el-table :data="form.order" style="width: 100%">
                    <el-table-column
                        fixed
                        prop="number"
                        label="编号"
                        >
                    </el-table-column>
                    <el-table-column prop="amount" label="订单总金额（元）" width="180">
                    </el-table-column>
                    <el-table-column prop="weight" label="订单总数量（KG/件）" width="180">
                    </el-table-column>
                    <el-table-column prop="state" label="状态" width="180">
                        <template slot-scope="scope">
                            <span class="color-success" v-if="scope.row.state == '已完结'">{{scope.row.state}}</span>
                            <span class="color-warning" v-else>{{scope.row.state}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="100">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="goView(scope.row.id)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <div class="e-m-t-15">
                <el-button @click="goBack">返回</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    layout: 'admin',
    head() {
        return {
            title: '后端厂商详情' 
        }
    },
    data() {
        return {
            id: 0,
            loading: true,
            form: {
                
            },
        }
    },
    mounted() {
        this.id = this.$route.query.id
        this.getDetails(this.id)
    },
    methods: {
        goBack() {
            this.$router.go(-1)
        },
        getDetails(id){
            this.loading = true
            this.$axios.get('/Franchise/Manufacturer/Details?id='+id).then((res)=>{
                this.form = res
                this.loading = false
            }).catch(()=>{
                this.loading = false
            })
        },
        goView(id) {
            this.$router.push({
                path:'/order/store/Views?id=' + id
            })
        },
    }
}
</script>

<style lang="scss" scoped>
    .img{
        border-radius: 5px;
        margin-right: 15px;
    }
</style>
